(function (){
	var currIndex;
	var lis;
	var liwidth;
	var len;
	var id;
		
	init()

	function init(){
		//显示图片数=实际图片数+2，第一张其实是第二张，最后一张是倒数第二张
		currIndex = 1;
		//复制图片
		var li_1 = document.querySelector('.slider .list .item:first-of-type');
		var copy_1 = li_1.cloneNode(true);

		var li_last =document.querySelector('.slider .list .item:last-of-type');
		var copy_last = li_last.cloneNode(true);

		//insert方法：将Node对象插入到目标位置之前。参数1表示需要的节点对象，参数2表示参照的位置，空时默认为末尾，返回值是参数1
		
		//添加节点
		var list = document.querySelector('.slider .list');
		list.appendChild(copy_1);
		//重复利用之前定义的li_first
		list.insertBefore(copy_last,li_1);
		// console.log(document.querySelectorAll('.slider .list .item')[0])
		// console.log(document.querySelectorAll('.slider .list .item')[4])
		//offsetWidth和width的区别
		//1前者包括width,padding,border.后者仅指代设定的width值
		//2前者是可读属性，后者可读写
		//3前者返回值是整数，后者是字符串且包括单位
		//4前者仅能返回通过style方式定义的内部样式表的width属性值

		lis = document.querySelectorAll('.list .item');
		// console.log(lis)
		liwidth = lis[0].offsetWidth;
		len = lis.length;
		// console.log(liwidth)
		list.style.width = liwidth * len + 'px';
		//li 的长度加个数
		list.style.left = - liwidth + 'px';    //初始从0开始
		
		//绑定点击事件
		// document.querySelector('.prev').onclick = function(){
		// 	slidePrve();
		// }
		// document.querySelector('.next').onclick = function(){
		// 	slideNext();
		// }
		
		//设定子弹
		var con = document.querySelectorAll('.slider .pagination .con');
		for (var i = 0; i< con.length;i++){
			con[i].index = i;
			con[i].onclick = function(){
				currIndex = this.index + 1;
				slideTo(currIndex);
			}
		}
		//事件监听
		document.querySelector('.slider').onmouseover = function(){
			stop();
		}
		document.querySelector('.slider').onmouseout = function(){
			auto();
		}
		
		
		//调用自动轮播
		auto();
		
		
		
	}
	function slideNext(){
		currIndex++;
		slideTo(currIndex);
	}
	function slidePrve(){
		currIndex--;
		slideTo(currIndex);
	}
	function slideTo(index){
		var list = document.querySelector('.slider .list');
		//判定当点击事件发生在最后一张图片时，先以无动画方式过渡到第二张，
		if(index === len){ 
			currIndex = index =2;
			list.style.left = -liwidth + 'px';
		}
		if(index === -1){ //当点到假的0 3 进行瞬移
			currIndex = index = len - 2;
			list.style.left = -(len - 1) * liwidth +'px'
		}
		//设定焦点
		var focusIndex;
		var con = document.querySelectorAll('.pagination .con');
		
		
		if(index === 0){
			focusIndex = con.length - 1;
		}else if (index === len - 1){
			focusIndex = 0;
			// console.log(len)
		}else{
			focusIndex = index - 1;
		}
		// console.log(focusIndex)
		
		
		//清除原有焦点
		document.querySelector('.focus').className = 'con';
		con[focusIndex].className = 'con focus';
		
		
		var left = -index * liwidth;
		animate(list,{
			left:left
		})
	}
	function auto(){
	clearInterval(id);
	id  = setInterval(function(){
		slideNext();
	},3000);
	}
	function stop(){
		clearInterval(id);
}
})()